<template>
  <div class="auth-panel">
    <div class="main">
      <div class="main-back" :style="backImg"></div>
      <div class="main-content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Auth",
  data() {
    return {
      backImg: {
        backgroundImage: "url(" + require("@/assets/image/back.jpg") + ")",
        backgroundRepeat: "no-repeat",
      }
    }
  },
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.main-back {
  background-position: center;
  width:100%;
  height: 100%;
  background-size:cover;
  -webkit-filter:blur(5px);
  -moz-filter:blur(5px);
  -o-filter:blur(5px);
  -ms-filter:blur(5px);
  filter:blur(5px);
  position:absolute;
  left:0;
  top:0;
  z-index: 2;
}

.main-content{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
</style>
